<html>
    <head>
        <title>Table Free-固件升级</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <link rel="stylesheet" media="all" href="common.css"></link>
    </head>
    <body>
        <div class="fr-fullscreen">
            <div class="fr-admin-top">
                <span class="fr-col-3 fr-align-center fr-vlign-middle"><img height="80%" src="logo.png"></span>
                <span class="fr-col-9 fr-align-center fr-txt-bold-32 fr-vlign-top headline">TableFree管理系统</span>
                <span class="fr-menu"></span>
            </div>
            <div class="fr-admin-middle">
                <div class="fr-admin-menu">
                    <ul>
                        <li><a href="network.html">网络配置</a></li>
                        <li><a href="javascript:;">用户管理</a></li>
                        <li><a href="control.html">控制端口设置</a></li>
                        <li class="active"><a href="upgrade.html">系统升级</a></li>
                        <li><a href="manual.html">使用说明书</a></li>
                    </ul>
                </div>
                <div class="fr-admin-main">
                    <div class="fr-admin-update-control fr-align-center">
                        <div class="fr-container fr-align-center fr-fullscreen">
                            <div class="fr-table fr-fullscreen">
                                <div class="fr-table-cell fr-vlign-middle">
                                    <ul class="fr-col-10 fr-row-margin10">
                                        <li class="fr-row fr-row-30 fr-row-margin10">
                                            <span class="fr-col-2 fr-align-right ">硬件版本:</span>
                                            <span class="fr-col-7 fr-align-left" id="hardware_version">
                                                v1.12.1
                                            </span>
                                            <span class="fr-col-2"></span>
                                        </li>
                                        <li class="fr-row fr-row-30 fr-row-margin10">
                                            <span class="fr-col-2 fr-align-right ">软件版本:</span>
                                            <span class="fr-col-7 fr-align-left" id="software_version">
                                                v1.12.1
                                            </span>
                                            <span class="fr-col-2"></span>
                                        </li>
                                        <li class="fr-row fr-row-30 fr-row-margin10">
                                            <span class="fr-col-2 fr-align-right fr-vlign-top">升级进度:</span>
                                            <span class="fr-col-7 fr-align-left">
                                                <div class="fr-progress-outer">
                                                    <div class="fr-progress-bar"></div>
                                                </div>
                                            </span>
                                            <span class="fr-col-2 fr-align-left fr-vlign-top" id="progress">0%</span>
                                        </li>
                                        <li class="fr-row fr-row-40 fr-row-margin10">
                                            <span class="fr-col-2 fr-align-right fr-vlign-top">升级文件:</span>
                                            <span class="fr-col-7 fr-align-left">
                                                <div class="fr-progress-outer fr-position-relative">
                                                    <span class="fr-align-left fr-position-absolute fr-position-left fr-padding-2em" id="filepath"></span>
                                                    <span class="fr-file-selector fr-position-right fr-position-absolute">
                                                        <i class="fr-file-chooser"></i>
                                                        <input type="file" name="file" id="file" class="fr-hide">
                                                    </span>
                                                </div>
                                            </span>
                                            <span class="fr-col-2 fr-align-left fr-vlign-top">
                                                <span class="fr-btn fr-btn-red" id="upload">升级</span>
                                            </span>
                                        </li>
                                        <li class="fr-row fr-row-30 fr-row-margin10" style="color: red;">
                                                <span class="fr-col-2 fr-align-right ">注意:</span>
                                                <span class="fr-col-7 fr-align-left" id="hardware_version">
                                                    升级过程中请勿断电
                                                </span>
                                                <span class="fr-col-2"></span>
                                            </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="fr-admin-description fr-align-center fr-hide">
                        使用说明书
                    </div>
                </div>
                <div class="fr-clear"></div>
            </div>
            <div class="fr-admin-bottom fr-align-center" id="status_bar">
                <span class="fr-col-3"><i class="fa"></i> <span id="status_ip">IP:192.168.1.2</span></span>
                <span class="fr-col-2"><i class="fa"></i> <span id="status_text"></span>Online</span></span>
                <span class="fr-col-2"><i class="fa"></i> <span id="status_username"></span></span>
                <span class="fr-col-3"><i class="fa"></i> <span id="status_time"></span></span>
            </div>
        </div>
        <!-- <div class="fr-container fr-align-center fr-fullscreen fr-mask" id="mask">
            <div class="fr-table fr-fullscreen">
                <div class="fr-table-cell fr-vlign-middle">
                    <ul class="cur-login-box fr-col-4">
                        <li class="fr-row-40 fr-row-title fr-align-left">管理登录</li>
                        <li class="fr-popup-content">
                            
                        </li>
                        <li class="fr-row-40 fr-align-center">
                            <span class="fr-btn fr-btn-orange">确定</span>
                            <span class="fr-btn fr-btn-red">取消</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div> -->
        
        <script type="text/javascript" src="jquery.1.11.3.mini.js"></script>
        <script type="text/javascript" src="common.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                //切换菜单
                $('.fr-admin-menu>ul>li').on('click', function(){
                    $('.fr-admin-menu>ul>li.active').removeClass('active');
                    $(this).addClass('active');
                    $('.fr-admin-main>div').hide();
                    $('.fr-admin-main>' + $(this).data('target')).show();
                })
                //添加用户
                $('#add_user_btn').on('click', function(){
                    popup.showContent('添加新用户', $('#add-user-html').html(),function(){
                        var data = {
                                    account: $.trim($('input[name=account]', this).val()),
                                    passwd: $.trim($('input[name=passwd]', this).val()),
                                    role: $(':radio[name=role]', this).val(),
                                   }
                        return true;
                    })
                })
                document.getElementById('file').onchange = function(){
                    $('#filepath').text(this.files[0].name);
                }
                //选择文件爱你
                $('.fr-file-selector').on('click', function(){
                    var file = document.getElementById('file').click();
                })

                $('#upload').on('click', function(){
                    if(document.getElementById("file").files.length == 0){
                        return popup.toast('请点击左侧图标选择升级文件');
                    }
                    xhrUpload('/systemUpgrade.cgi', document.getElementById("file").files[0], function(e){
                        var progress = parseInt(e.loaded / e.total * 100) + '%';
                        $('#progress').text(progress);
                        $('.fr-progress-bar').css({width: progress});
                        if(progress == '100%'){
                            setTimeout(function(){
                                top.location.reload();
                            }, 3000);
                        }
                    }, function(retraw){
                        var retdata = JSON.parse(retraw);
                        if(!retdata){
                            return popup.toast('文件上传发生错误');
                        }
                        if(retdata.retCode == 0){
                            return popup.toast('文件上传完成');
                        }
                        return popup.toast(retdata.retDescription);
                    }, function(){
                        return popup.toast('上传文件发生错误');
                    });
                })

                var init = {
                    version: function(){
                        request('/systemVersion.cgi', null, 'get', function(data){
                            $('#software_version').text(data.softwareVersion);
                            $('#hardware_version').text(data.hardwareVersion);
                        })
                    }
                };

                init.version();
            })
        </script>
    </body>
    </html>